import Category from '@/components/category';
import Reading from '@/components/Reading';
import { KnowledgeModelState } from '@/models/knowledge';
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'umi';
import styles from './knowledge.less';

export default function Knowledge() {
  let dispatch = useDispatch(),
    { knowledgeList } = useSelector((state: { knowledge: KnowledgeModelState }) => state.knowledge);

  useEffect(() => {
    dispatch({
      type: 'knowledge/getKnowledgeList'
    })
  }, [])

  return (
    <div className={styles.knowledge}>
      <div className={styles.section}>
        <div>
          <div className={styles.list}>
            {knowledgeList.map((item) => (
              <div key={item.id} className={styles.list_item}>
                <div>
                  <a href="">
                    <header>
                      <div className={styles.title}>
                        <b>{item.title}</b>
                      </div>
                      <span className={styles.times}>6个月前</span>
                    </header>
                    <main>
                      <div className={styles.cover}>
                        <img src={item.cover} alt="" />
                      </div>
                      <div className={styles.text}>
                        <div className={styles.name}>
                          {item.title}
                        </div>
                        <div className={styles.views}>
                          <span>
                            <span role="img" aria-label="heart">
                              <svg viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path></svg>
                            </span>
                            <span>{item.views}</span>
                          </span>
                          <span className={styles.dot}>·</span>
                          <span>
                            <span role="img" aria-label="share-alt">
                              <svg viewBox="64 64 896 896" focusable="false" data-icon="share-alt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 000-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"></path></svg>
                            </span>
                            <span>分享</span>
                          </span>
                        </div>
                      </div>
                    </main>
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className={styles.aside}>
        <Reading />
        <Category />
      </div>
    </div>
  )
}